
.main-container {
    padding: 0;
    .main-center {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        animation-duration:1s;
        :deep(.my-el-image){
            width: 100%;
            height: 100%;
            position: absolute;
        }
        :deep(.el-image__inner) {
            width: 100%;
            height: 100%;
        }
    }
    @keyframes animation-hideToShow {
        0% {
            opacity: 0;
        }
        100% {
            opacity: 1;
        }
    }
    .operate-center {
        position: relative;
        box-shadow: 0 15px 30px rgba(0,0,0,0.15),0 10px 10px rgba(0,0,0,0.15);
        opacity: 0.9;
        border-radius: 10px;
        overflow: hidden;
        width: 750px;
        max-width: 100%;
        margin: 10px;
        min-height: 450px;
        button {
            border-radius: 2em;
            border: none;
            background: $button-red-color;
            // background: #4FDAC1;
            color: #ffffff;
            font-size: 16px !important;
            font-weight: 700;
            padding: 12px 45px;
            letter-spacing: 2px;
            font-family: MKWXY;
        }
        button:hover {
            // animation: jello-horizontal 0.9s both;
            animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both
        }
        h1 {
            margin: 20px 0;
            letter-spacing: 2px;
        }
        .form-container {
            position: absolute;
            height: 100%;
            transition: all .5s ease-in-out;
            .center-box {
                background: $common-white-color;
                flex-direction: column;
                padding: 0 20px;
                height: 100%;
                form {
                    width: 100% !important;
                }
                button {
                    height: 45px !important;
                    padding: 12px 46px;
                }
            }
        }
        .register-container {
            left:0;
            width:50%;
            opacity: 0;
            .code-item button{
                padding: 0px 20px !important;
                height: 40px !important;
                width: 70px !important;
                @include border-radius-all(0,4px,4px,0);
            }
        }
        .register-container-active {
            transform: translateX(100%);
            opacity: 1;
        }
        .login-container {
            left:0;
            width: 50%;
            p {
                margin: 15px 0;
                cursor: pointer;
                transition: all .3s;
            }
            p:hover {
                color: $button-red-color;
                text-decoration: underline;
            }
        }
        .login-container-active {
            opacity: 0;
            transform: translateY(100%);
        }
        .overlay-container {
            position: absolute;
            left: 50%;
            width: 50%;
            height: 100%;
            overflow: hidden;
            transition: all .5s ease-in-out;
            .overlay-box {
                background: linear-gradient(90deg,#ff4b2b,#ff416c);
                // background: linear-gradient(90deg,#5CB3CC,#4FDAC1);
                // background: linear-gradient(90deg, #60DADC, #75CADF);
                color: $common-white-color;
                position: relative;
                left: -100%;
                height: 100%;
                width: 200%;
                transition: all .5s ease-in-out;
                .overlay-left {
                    transform: translateY(-20%);
                }
                .overlay-left-active { // 左右滑动的同时，带点上下滑动效果
                    transform: translateY(0%);
                }
                .overlay-panel {
                    position: absolute;
                    top: 0;
                    flex-direction: column;
                    height: 100%;
                    width: 50%;
                    transition: all .5s ease-in-out;
                    p {
                        margin: 20px 0 30px 0;
                    }
                    .overlay-btn {
                        cursor: pointer;
                        background: transparent;
                        border: 1px solid $common-white-color;
                    }
                }
            }
            .overlay-box-active {
                transform: translateX(50%);
            }
            .overlay-right {
                right: 0;
                transform: translateY(0);
            }
            .overlay-right-active { // 左右滑动的同时，带点上下滑动效果
                transform: translateY(-20%);
            }
        }
        .overlay-container-active {
            transform: translateX(-100%);
        }
          
    }
}